﻿<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>图例</title>

 <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />

  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>

  <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
        "dojo/_base/array", "dojo/parser",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/layout/AccordionContainer", "dojo/domReady!"
      ], function (
        Map, FeatureLayer, Legend,
        arrayUtils, parser
      ) {
          parser.parse();
          map = new Map("map", {
              basemap: "topo",
              center: [-96.53, 38.374],
              zoom: 13
          });

          var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", {
              mode: FeatureLayer.MODE_ONDEMAND,
              outFields: ["*"]
          });
          var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {
              mode: FeatureLayer.MODE_ONDEMAND,
              outFields: ["*"]
          });

          //添加图例
          map.on("layers-add-result", function (evt) {
              //回调函数适用于arr和返回一个数组的每个元素的结果,arrayUtils.map DOJO遍历集合，返回数组
              var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
                  return { layer: layer.layer, title: layer.layer.name };
              });
              if (layerInfo.length > 0) {
                  var legendDijit = new Legend({
                      map: map,
                      layerInfos: layerInfo
                  }, "legendDiv");
                  legendDijit.startup();
              }
          });

          map.addLayers([waterbodies, rivers]);
      });
  </script>
</head>

<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  </div>
</div>
</body>

</html>